<template>
  <div class="login-body">
    <div class="login-panel">
      <div class="login-title">欢迎登录 !</div>
      <div class="form-item-box">
        <input
          class="my-form-input"
          type="text"
          maxlength="50"
          v-model="formData.username"
          placeholder="请输入账号"
        />
        <div class="label-text user">账号</div>
      </div>
      <div class="form-item-box">
        <div class="label-text pwd">密码</div>
        <input
          class="my-form-input"
          ref="pwdInput"
          @blur="isShowPwd = false"
          :type="isShowPwd ? 'text' : 'password'"
          maxlength="50"
          v-model="formData.password"
          placeholder="请输入密码"
        />
        <div
          :class="`change-show-pwd-btn ${isShowPwd ? 'hide' : 'show'}`"
          @click="changePwdShowState"
        ></div>
      </div>
      <!-- <div class="form-item-box">
                <input class="my-form-input ver" type="text" @keyup.enter="login" maxlength="6" v-model="formData.verCode" placeholder="请输入验证码" />
                <div class="label-text ver"></div>
                <div class="get-ver-code-box" v-if="verCodeState.isSend">
                    {{ verCodeState.count }} 秒后获取
                </div>
                <div class="get-ver-code-box" v-else @click="startCount" v-loading="verCodeState.isGeting">
                    获取验证码
                </div>
            </div> -->

      <div class="form-item-box">
        <div class="submit-btn" @click="login" v-loading="isLoading">登录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useAppStore from "@/store/modules/app";
import { loginAPI, getVerCodeAPI } from "@/api";
import { ElMessage } from "element-plus";
import { setToken } from "@/utils/token";
import { nextTick } from "vue";
import { useRouter } from "vue-router";
// // 获取 router 实例
// const router = useRouter();
// // 假设你想要跳过登录并直接进入首页
// nextTick(() => {
//   // 模拟登录成功
//   useAppStore().setLoginStatus(true);
//   ElMessage.success("登录成功");

//   // 跳转到首页
//   router.push("/home"); // 将 '/home' 替换为你的首页路由路径
// });
//表单
const formDataRef = ref();
const pwdInput = ref(null);
const isShowPwd = ref(false);
const isLoading = ref(false);
const changePwdShowState = () => {
  isShowPwd.value = !isShowPwd.value;
  pwdInput.value && pwdInput.value.focus();
};

const formData = reactive({
  username: "",
  password: "",
  verCode: "",
});

if (import.meta.env.DEV) {
  formData.username = "szls_sps_@2024";
  formData.password = "szlsSps_cd2024&";
}

const verCodeState = reactive({
  isSend: false,
  count: 60,
  isGeting: false,
  timer: null,
});

const startCount = async () => {
  const tel = formData.username;
  const pwd = formData.password;
  if (!tel) return ElMessage.warning("请输入账号");
  if (!pwd) return ElMessage.warning("请输入密码");
  verCodeState.isGeting = true;
  // if (!(/^1[3456789]\d{9}$/.test(tel))) return ElMessage.warning("手机号码有误，请重新输入");
  const res = await getVerCodeAPI({
    userName: tel,
    passWord: pwd,
  });
  verCodeState.isGeting = false;
  console.log("res", res);
  if (res && res.isResultTrue) {
    ElMessage.success("发送成功");
    verCodeState.isSend = true;
    verCodeState.count = 60;
    loopCount();
  } else {
    ElMessage.warning(res.resultMsg);
  }
};

const loopCount = () => {
  if (verCodeState.timer) clearTimeout(verCodeState.timer);
  if (verCodeState.count <= 0) {
    verCodeState.isSend = false;
    return;
  }
  verCodeState.timer = setTimeout(() => {
    verCodeState.count--;
    loopCount();
  }, 1000);
};

const login = async () => {
  if (isLoading.value) return;
  if (!formData.username) return ElMessage.warning("请输入账号");
  if (!formData.password) return ElMessage.warning("请输入密码");
  // if (!formData.verCode) return ElMessage.warning('请输入验证码')

  isLoading.value = true;
  const params = {
    // noteText: formData.verCode,
    userName: formData.username,
    passWord: formData.password,
  };
  const res = await loginAPI(params);
  console.log("res", res);
  isLoading.value = false;
  if (res && res.isResultTrue) {
    // localStorage.setItem('login_state', 1)
    setToken(res.data.auth_token);
    // useAppStore().setLoginStatus(true);
    // useAppStore().setLoginParams(res.data);
    ElMessage.success("登录成功");
  } else {
    ElMessage.warning(res.resultMsg);
  }
};
</script>

<style lang="scss" scoped>
.login-body {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  background: url(@/assets/images/login_bg.png) no-repeat center / cover;
  pointer-events: all;
  .login-panel {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 113px;
    width: 644px;
    height: 100%;
    background-color: rgba($color: #261129, $alpha: 0.64);
    color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;

    .login-title {
      font-size: 32px;
      height: 36px;
      line-height: 36px;
      margin-bottom: 48px;
      letter-spacing: 4px;
      font-family: PangMenZhengDao;
    }

    .form-item-box {
      width: 100%;
      height: 48px;
      box-sizing: border-box;
      position: relative;
      margin-bottom: 20px;

      .submit-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        letter-spacing: 4px;
        cursor: pointer;
        background: linear-gradient(
          to top,
          #874890,
          rgba($color: #9996e8, $alpha: 0.39)
        );
      }

      .change-show-pwd-btn {
        display: none;
        position: absolute;
        cursor: pointer;
        right: 8px;
        top: 50%;
        transform: translate(0%, -50%);
        width: 34px;
        height: 34px;
        background: url(@/assets/images/ic_can_see.png) no-repeat center/20px
          20px;

        &.show {
          background-image: url(@/assets/images/ic_can_see.png);
        }
        &.hide {
          background-image: url(@/assets/images/ic_cannot_see.png);
        }
      }

      .label-text {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 94px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding-left: 44px;
        font-size: 16px;
        white-space: nowrap;
        color: #ffe8f7;
        background: url(@/assets/images/ic_accout.png) no-repeat 16px
          center/22px 22px;
        &.pwd {
          background-image: url(@/assets/images/ic_pwd.png);
        }
        &.ver {
          width: 44px;
          background-image: url(@/assets/images/ic_ver.png);
          &::after {
            display: none;
          }
        }

        &::after {
          content: "：";
          font-family: initial;
        }
      }

      .get-ver-code-box {
        width: 133px;
        height: 48px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: rgba($color: #ffc1e9, $alpha: 0.28);
        color: #ffe8f7;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        cursor: pointer;
      }

      .my-form-input {
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 1px solid rgba($color: #ffc1e9, $alpha: 0.8);
        outline: none;
        color: #fff;
        box-sizing: border-box;
        padding-left: 94px;
        font-size: 16px;

        &:hover {
          background-color: rgba($color: #ffc1e9, $alpha: 0.28);
        }

        &.ver {
          padding-left: 44px;
        }
        &::placeholder {
          color: #ffe8f7;
        }
      }

      .my-form-input:focus + .change-show-pwd-btn {
        display: block;
      }

      input[type="password"]::-webkit-credentials-cramble-button {
        appearance: none;
      }

      input[type="password"]::-ms-reveal {
        display: none;
      }

      input[type="password"]::-ms-clear {
        display: none;
      }

      input[type="password"] {
        appearance: none;
      }
    }
  }
}
</style>